<template>
    <div class="achievement-unlock">
        <!-- 背景动画 -->
        <div class="background-animation">
            <div class="particle" v-for="i in 20" :key="i" :style="getParticleStyle(i)"></div>
        </div>

        <!-- 主要内容 -->
        <div class="unlock-content">
            <!-- 标题 -->
            <div class="unlock-header">
                <h2 class="unlock-title">Achievement Unlocked!</h2>
                <div class="unlock-subtitle">Congratulations on your progress!</div>
            </div>

            <!-- 成就图标 -->
            <div class="achievement-showcase">
                <div class="icon-container">
                    <van-image :src="achievement.icon_url || '/default-achievement.png'" width="120" height="120"
                        fit="cover" class="achievement-icon" />
                    <div class="glow-ring"></div>
                    <div class="pulse-ring"></div>
                </div>
            </div>

            <!-- 成就信息 -->
            <div class="achievement-details">
                <h3 class="achievement-name">{{ achievement.title }}</h3>
                <p class="achievement-desc">{{ achievement.description }}</p>

                <!-- 奖励信息 -->
                <div class="rewards-section">
                    <div class="reward-item">
                        <van-icon name="diamond-o" />
                        <span>+{{ achievement.points }} Points</span>
                    </div>
                    <div v-if="achievement.badge_url" class="reward-item">
                        <van-icon name="medal-o" />
                        <span>Special Badge</span>
                    </div>
                </div>
            </div>

            <!-- 统计信息 -->
            <div class="stats-section">
                <div class="stat-item">
                    <div class="stat-number">{{ totalAchievements }}</div>
                    <div class="stat-label">Total Achievements</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number">{{ totalPoints }}</div>
                    <div class="stat-label">Total Points</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number">{{ currentLevel }}</div>
                    <div class="stat-label">Current Level</div>
                </div>
            </div>

            <!-- 操作按钮 -->
            <div class="action-buttons">
                <van-button type="primary" size="large" @click="shareAchievement" class="share-button">
                    <van-icon name="share-o" />
                    Share Achievement
                </van-button>
                <van-button size="large" @click="continueTraining" class="continue-button">
                    Continue Training
                </van-button>
            </div>

            <!-- 关闭按钮 -->
            <div class="close-button" @click="handleClose">
                <van-icon name="cross" />
            </div>
        </div>

        <!-- 庆祝动效 -->
        <div class="celebration-effects">
            <!-- 烟花效果 -->
            <div class="firework" v-for="i in 3" :key="`firework-${i}`" :style="getFireworkStyle(i)">
                <div class="spark" v-for="j in 8" :key="`spark-${j}`" :style="getSparkStyle(j)"></div>
            </div>

            <!-- 彩带效果 -->
            <div class="confetti" v-for="i in 15" :key="`confetti-${i}`" :style="getConfettiStyle(i)"></div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { showToast } from 'vant'
import type { Achievement } from '@/api/achievement'

interface Props {
    achievement: Achievement
}

interface Emits {
    (e: 'close'): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

// 模拟统计数据
const totalAchievements = ref(12)
const totalPoints = ref(2850)
const currentLevel = ref(8)

// 方法
const getParticleStyle = (index: number) => {
    const angle = (index / 20) * 360
    const radius = 150 + Math.random() * 100
    const x = Math.cos(angle * Math.PI / 180) * radius
    const y = Math.sin(angle * Math.PI / 180) * radius

    return {
        left: `calc(50% + ${x}px)`,
        top: `calc(50% + ${y}px)`,
        animationDelay: `${Math.random() * 2}s`,
        animationDuration: `${2 + Math.random() * 2}s`
    }
}

const getFireworkStyle = (index: number) => {
    const positions = [
        { left: '20%', top: '30%' },
        { left: '80%', top: '25%' },
        { left: '50%', top: '40%' }
    ]

    return {
        ...positions[index - 1],
        animationDelay: `${index * 0.5}s`
    }
}

const getSparkStyle = (index: number) => {
    const angle = (index / 8) * 360

    return {
        transform: `rotate(${angle}deg)`,
        animationDelay: `${index * 0.1}s`
    }
}

const getConfettiStyle = (index: number) => {
    const colors = ['#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4', '#feca57', '#ff9ff3']

    return {
        left: `${Math.random() * 100}%`,
        backgroundColor: colors[Math.floor(Math.random() * colors.length)],
        animationDelay: `${Math.random() * 3}s`,
        animationDuration: `${3 + Math.random() * 2}s`
    }
}

const shareAchievement = async () => {
    try {
        if (navigator.share) {
            await navigator.share({
                title: `I unlocked "${props.achievement.title}"!`,
                text: `Check out my latest achievement in Social Dojo: ${props.achievement.description}`,
                url: window.location.href
            })
        } else {
            await navigator.clipboard.writeText(
                `I just unlocked "${props.achievement.title}" in Social Dojo! 🏆 ${window.location.href}`
            )
            showToast('Achievement shared to clipboard!')
        }
    } catch (error) {
        console.error('Failed to share achievement:', error)
        showToast('Failed to share achievement')
    }
}

const continueTraining = () => {
    showToast('Redirecting to training...')
    handleClose()
}

const handleClose = () => {
    emit('close')
}

// 生命周期
onMounted(() => {
    // 播放解锁音效（如果有的话）
    // playUnlockSound()
})
</script>

<style lang="scss" scoped>
.achievement-unlock {
    position: relative;
    width: 350px;
    max-width: 90vw;
    max-height: 90vh;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 20px;
    overflow: hidden;
    color: white;

    .background-animation {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        overflow: hidden;

        .particle {
            position: absolute;
            width: 4px;
            height: 4px;
            background: rgba(255, 255, 255, 0.8);
            border-radius: 50%;
            animation: float 4s ease-in-out infinite;
        }
    }

    .unlock-content {
        position: relative;
        z-index: 2;
        padding: 32px 24px;
        text-align: center;

        .unlock-header {
            margin-bottom: 32px;

            .unlock-title {
                font-size: 24px;
                font-weight: 700;
                margin: 0 0 8px 0;
                text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
            }

            .unlock-subtitle {
                font-size: 14px;
                opacity: 0.9;
            }
        }

        .achievement-showcase {
            margin-bottom: 32px;

            .icon-container {
                position: relative;
                display: inline-block;

                .achievement-icon {
                    border-radius: 20px;
                    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
                    animation: bounce 2s ease-in-out infinite;
                }

                .glow-ring {
                    position: absolute;
                    top: -10px;
                    left: -10px;
                    right: -10px;
                    bottom: -10px;
                    border: 3px solid rgba(255, 210, 30, 0.6);
                    border-radius: 25px;
                    animation: rotate 3s linear infinite;
                }

                .pulse-ring {
                    position: absolute;
                    top: -20px;
                    left: -20px;
                    right: -20px;
                    bottom: -20px;
                    border: 2px solid rgba(255, 255, 255, 0.3);
                    border-radius: 30px;
                    animation: pulse 2s ease-in-out infinite;
                }
            }
        }

        .achievement-details {
            margin-bottom: 32px;

            .achievement-name {
                font-size: 20px;
                font-weight: 600;
                margin: 0 0 8px 0;
            }

            .achievement-desc {
                font-size: 14px;
                opacity: 0.9;
                line-height: 1.5;
                margin: 0 0 20px 0;
            }

            .rewards-section {
                display: flex;
                justify-content: center;
                gap: 20px;

                .reward-item {
                    display: flex;
                    align-items: center;
                    gap: 6px;
                    font-size: 14px;
                    font-weight: 500;

                    .van-icon {
                        color: #ffd21e;
                        font-size: 16px;
                    }
                }
            }
        }

        .stats-section {
            display: flex;
            justify-content: space-around;
            margin-bottom: 32px;
            padding: 20px 0;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 12px;

            .stat-item {
                text-align: center;

                .stat-number {
                    font-size: 20px;
                    font-weight: 700;
                    margin-bottom: 4px;
                }

                .stat-label {
                    font-size: 12px;
                    opacity: 0.8;
                }
            }
        }

        .action-buttons {
            display: flex;
            flex-direction: column;
            gap: 12px;

            .share-button {
                background: linear-gradient(135deg, #ffd21e, #ff6b35);
                border: none;
                color: #323233;
                font-weight: 600;

                .van-icon {
                    margin-right: 6px;
                }
            }

            .continue-button {
                background: rgba(255, 255, 255, 0.2);
                border: 1px solid rgba(255, 255, 255, 0.3);
                color: white;
            }
        }

        .close-button {
            position: absolute;
            top: 16px;
            right: 16px;
            width: 32px;
            height: 32px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: background-color 0.3s;

            &:hover {
                background: rgba(255, 255, 255, 0.3);
            }

            .van-icon {
                font-size: 16px;
            }
        }
    }

    .celebration-effects {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        pointer-events: none;
        overflow: hidden;

        .firework {
            position: absolute;
            animation: firework-explosion 1s ease-out;

            .spark {
                position: absolute;
                width: 3px;
                height: 20px;
                background: linear-gradient(to bottom, #ffd21e, transparent);
                transform-origin: bottom center;
                animation: spark-fly 1s ease-out forwards;
            }
        }

        .confetti {
            position: absolute;
            width: 8px;
            height: 8px;
            top: -10px;
            animation: confetti-fall 5s linear infinite;
        }
    }
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0px) rotate(0deg);
        opacity: 0.7;
    }

    50% {
        transform: translateY(-20px) rotate(180deg);
        opacity: 1;
    }
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-10px);
    }

    60% {
        transform: translateY(-5px);
    }
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.4;
    }

    100% {
        transform: scale(1);
        opacity: 0.8;
    }
}

@keyframes firework-explosion {
    0% {
        transform: scale(0);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 0;
    }
}

@keyframes spark-fly {
    0% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }

    100% {
        transform: translateY(-100px) scale(0);
        opacity: 0;
    }
}

@keyframes confetti-fall {
    0% {
        transform: translateY(-100vh) rotate(0deg);
        opacity: 1;
    }

    100% {
        transform: translateY(100vh) rotate(720deg);
        opacity: 0;
    }
}
</style>